<template>
  <div class="evaluate-container">
    <div class="evaluate-form">
      <h2>❤您的评价就是我们最大的动力！❤</h2>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.member_name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="评价日期">
          <el-date-picker
            v-model="form.evaluate_date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input
            type="textarea"
            v-model="form.content"
            placeholder="请输入评价内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="评价等级">
          <el-select v-model="form.rating" placeholder="请选择评价等级">
            <el-option label="好评" value="好评"></el-option>
            <el-option label="中评" value="中评"></el-option>
            <el-option label="差评" value="差评"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交评价</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        member_name: '',
        evaluate_date: '',
        content: '',
        rating: '好评', // 默认好评
      },
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('/api/evaluate/add', this.form);
        if (response.status === 200) {
          this.$message.success('评价提交成功');
          this.$router.push('/allevaluate');
        } else {
          this.$message.error('评价提交失败');
        }
      } catch (error) {
        console.error('提交评价时发生错误:', error);
        this.$message.error('提交评价时发生错误');
      }
    },
    goBack() {
      this.$router.push('/member');
    },
  },
};
</script>
<style scoped>
.evaluate-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('@/assets/img/evaluate.jpg');
  background-size: cover;
  background-position: center;
}

.evaluate-form {
  width: 600px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.8); /* 轻微透明的白色背景 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>